<template>
  <div>
    <div class="title">
      <span class="title-name">项目指标</span>
      <div class="tag-button">
        <el-button type="primary" @click="edit" v-if="isvalid">保存</el-button>
      </div>
      <div class="title-icon">
        <i class="iconfont iconhelp" @click="preview"></i>
      </div>
    </div>
    <div class="leftTable">
      <div class="tableTitle">项目包含工程类别</div>
      <el-row style="padding:10px;background-color:rgb(244, 244, 244)">
        <el-col
          v-for="item in dataTable.bmsMdEngineeringCategorys"
          :key="item.engineeringId"
          style="background-color:#fff"
          :span="6"
        >
          <el-checkbox-group v-model="engineeringIds">
            <el-tooltip
              class="item bmsMdEngineeringCategorys"
              effect="dark"
              :content="item.engineeringRemark"
              placement="top"
            >
              <el-checkbox
                :label="item.engineeringId"
                @change="handlebmsMdEngineeringCategorys"
              >{{ item.engineeringName }}</el-checkbox>
            </el-tooltip>
          </el-checkbox-group>
        </el-col>
      </el-row>
      <div class="tableTitle">细分类别</div>
      <el-row style="padding:10px;background-color:rgb(244, 244, 244)">
        <el-row
          v-for="item in categorys[0]"
          :key="item.engineeringId"
          style="background-color:#fff;padding-top:10px"
        >
          <el-checkbox-group v-model="categorysTwoIds">
            <el-tooltip
              class="item"
              effect="dark"
              :content="item.engineeringRemark"
              placement="top"
            >
              <el-checkbox
                :label="item.engineeringId"
                style="padding-left:10px"
                @change="handleTwo"
              >{{ item.engineeringName }}</el-checkbox>
            </el-tooltip>
          </el-checkbox-group>
          <div style="margin:10px 0;" />
          <el-row style="padding-left:30px">
            <el-col
              v-for="obj in item.children"
              :key="obj.engineeringId"
              style="background-color:#fff"
              :span="6"
            >
              <el-checkbox-group v-model="categorysIds">
                <el-tooltip
                  class="item categorys"
                  effect="dark"
                  :content="obj.engineeringRemark"
                  placement="top"
                >
                  <el-checkbox
                    :label="obj.engineeringId"
                    @change="handleThree"
                  >{{ obj.engineeringName }}</el-checkbox>
                </el-tooltip>
              </el-checkbox-group>
            </el-col>
          </el-row>
        </el-row>
        <!-- <el-col
          style="background-color:#fff"
          :span="6"
          v-for="item in dataTable.bmsMdEngineeringCategorys"
          :key="item.engineeringId"
        >
          <el-checkbox-group v-model="form.engineeringIds">
            <el-tooltip
              class="item bmsMdEngineeringCategorys"
              effect="dark"
              :content="item.engineeringRemark"
              placement="top"
            >
              <el-checkbox :label="item.engineeringId">{{item.engineeringName}}</el-checkbox>
            </el-tooltip>
          </el-checkbox-group>
        </el-col>-->
      </el-row>
      <div class="tableTitle">业绩推荐关键字</div>
      <el-row style="padding:10px;background-color:rgb(244, 244, 244)">
        <el-col
          v-for="item in dataTable.bmsMdPerformanceKeywords"
          :key="item.performanceKeywordId"
          style="background-color:#fff"
          :span="6"
        >
          <el-checkbox-group v-model="performanceKeywordIds">
            <el-tooltip
              class="item bmsMdPerformanceKeywords"
              effect="dark"
              :content="item.performanceKeywordRemark"
              placement="top"
            >
              <el-checkbox
                :label="item.performanceKeywordId"
                @change="handleWords"
              >{{ item.performanceKeywordName }}</el-checkbox>
            </el-tooltip>
          </el-checkbox-group>
        </el-col>
      </el-row>
    </div>
    <div class="rightTable">
      <div class="tableTitle">项目指标</div>
      <el-form ref="form" :model="form" label-width="200px" :inline="true" style="margin-top:20px">
        <el-form-item
          v-for="item in getProjectIndicators"
          :key="item.indicatorId"
          :label="item.indicatorName"
          :prop="item.required+item.indicatorId"
          :rules="{required: item.required, message: item.indicatorName+'不能为空', trigger: 'blur' }"
        >
          <el-input
            v-if="item.fieldUnit===0"
            v-model="form[item.required+item.indicatorId]"
            placeholder="请输入"
            type="number"
          />
          <el-input
            v-else-if="item.fieldUnit===1"
            v-model="form[item.required+item.indicatorId]"
            placeholder="请输入"
          />
          <el-select v-else-if="item.fieldUnit===2" v-model="form[item.required+item.indicatorId]">
            <el-option
              v-for="obj in item.dictDatas"
              :key="obj.dictValue"
              :label="obj.dictLabel"
              :value="obj.dictValue"
            />
          </el-select>
          <el-input v-else-if="item.fieldUnit===3" v-model="form[item.required+item.indicatorId]"
                  placeholder="请输入"
                  type="textarea"
                  :rows="2"
                ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <!-- 预览 -->
    <el-dialog :visible.sync="openPreview" width="80%">
      <iframe :src="manualPreviewUrl" frameborder="0" width="100%" height="700px"></iframe>
    </el-dialog>
  </div>
</template>
<script>
import aTitle from '@/components/Title';
import {
  projectIndex,
  updateIndex,
  getIndicators
} from '@/api/projectWorkbench/projectList/projectIndex';
export default {
  name: 'ProjectIndex',
  components: { aTitle },
  data () {
    return {
      manualPreviewUrl: null,
      openPreview: false,
      form: {},
      dataTable: [],
      // bmsMdPerformanceKeywords: [],
      // defaultBmsMdProjectIndicators: [],
      performanceKeywordIds: [],
      engineeringIds: [],
      categorys: [],
      categorysTwoIds: [],
      categorysIds: [],
      projectIndicators: [],
      getProjectIndicators: [],
      isvalid: false,
    }
  },
  watch: {

  },
  created () {
    this.getIndex()
    this.isvalid = sessionStorage.getItem('isvalid') === '1' ? true : false;
  },
  mounted(){
    document.title=document.getElementById("projectNameTitle").innerHTML;
  },
  methods: {
    preview () {
      this.openPreview = true;
      this.manualPreviewUrl = `${this.previewUrl}${encodeURIComponent(
        `${this.operationManual}项目主页/业务系统操作说明-项目主页-项目指标.xlsx`
      )}&name=${encodeURIComponent("业务系统操作说明-项目主页-项目指标.xlsx")}`;
    },
    getIndex () {
      this.engineeringIds = [];
      (this.performanceKeywordIds = []),
        (this.engineeringIds = []),
        (this.categorys = []),
        (this.categorysTwoIds = []),
        (this.categorysIds = []),
        (this.projectIndicators = []),
        (this.getProjectIndicators = []),
        (this.dataTable = [])
      this.form = {}
      const loading = this.$loading({
        lock: true,
        text: 'Loading'
      })
      projectIndex({ projectId: this.$route.params.id }).then(res => {
        this.dataTable = res

        res.bmsMdEngineeringCategorys
          .filter(item => item.selected === true)
          .map(item => {
            this.engineeringIds.push(item.engineeringId)
            // if (item.indicators.length > 0) {
            //   this.projectIndicators = this.projectIndicators.concat(
            //     item.indicators
            //   )
            // }
            if (item.children.length > 0) {
              this.categorys.push(item.children)
              item.children
                .filter(obj => obj.selected === true)
                .map(obj => {
                  this.categorysTwoIds.push(obj.engineeringId)
                  // this.projectIndicators = this.projectIndicators.concat(
                  //   obj.indicators
                  // )
                })
              item.children.map(obj => {
                if (obj.children.length > 0) {
                  obj.children
                    .filter(obj => obj.selected === true)
                    .map(obj => {
                      this.categorysIds.push(obj.engineeringId)
                      // this.projectIndicators = this.projectIndicators.concat(
                      //   obj.indicators
                      // )
                    })
                }
              })
            }
          })

        res.bmsMdPerformanceKeywords
          .filter(item => item.selected === true)
          .map(item => {
            this.performanceKeywordIds.push(item.performanceKeywordId)
          })

        this.getProjectIndicatorsList()
      })
    },
    edit () {
      // this.form = {}
      // this.getProjectIndicators.map(item => {
      //   this.form[item.required + item.indicatorId] = item.indicatorValue
      // })
      this.$refs['form'].validate((valid, name) => {
        if (valid) {
          let indicatorValues = {}
          indicatorValues = this.getProjectIndicators.map(item => {
            return {
              [item.indicatorId]: this.form[item.isRequired + item.indicatorId]
            }
          })
          const indexList = {
            performanceKeywordIds: this.performanceKeywordIds,
            guid: this.dataTable.guid,
            projectId: this.dataTable.projectId,
            engineeringIds: this.engineeringIds
              .concat(this.categorysTwoIds)
              .concat(this.categorysIds),
            indicators: indicatorValues
          }
          updateIndex(indexList).then(res => {
            if (res.code === 200) {
              this.getIndex()
              this.msgSuccess(res.msg)
            }
          })
        } else {
          for (var key in name) {
            this.msgError(name[key][0].message)
            break;
          }
        }
      })

    },
    handlebmsMdEngineeringCategorys (val) {
      if (!val) {
        this.categorys = []
        this.categorysTwoIds = []
        this.categorysIds = []
        this.projectIndicators = []
      }
      this.engineeringIds.map(obj => {
        this.dataTable.bmsMdEngineeringCategorys.map(item => {
          if (item.children.length > 0 && item.engineeringId === obj) {
            this.categorys.push(item.children)
          }
        })
      })
      this.getProjectIndicatorsList()
    },
    handleTwo (val) {
      console.log(this.categorysTwoIds, '123')
      console.log(val)
      if (!val) {
        this.categorysIds = []
      }
      // this.categorysTwoIds.map(item => {
      //   this.categorys[0].map(obj => {
      //     if (obj.children.length > 0) {
      //       obj.children.map(val => {
      //         if (val.parentId === item) {
      //           this.categorysIds.push(val.engineeringId)
      //         }
      //       })
      //     }
      //   })
      // })
      this.getProjectIndicatorsList(val)
    },
    handleThree (val) {
      if (!val) {
        this.categorysTwoIds = []
      }
      this.categorysIds.map(item => {
        this.categorys[0].map(obj => {
          if (obj.children.length > 0) {
            obj.children.map(val => {
              if (val.engineeringId === item) {
                console.log(this.categorysTwoIds, 'this.categorysTwoIds')
                this.categorysTwoIds = this.categorysTwoIds.filter(a => a !== val.parentId)
                this.categorysTwoIds.push(val.parentId)
                // this.categorysTwoIds.push(val.parentId)
              }
            })
          }
        })
      })
      this.getProjectIndicatorsList(val)
    },
    handleWords (val) {
      this.getProjectIndicatorsList(val)
    },
    getProjectIndicatorsList () {
      this.getProjectIndicators = []
      this.projectIndicators = []
      const loading = this.$loading({
        lock: true,
        text: 'Loading'
      })
      const form = {
        engineeringIds: [],
        performanceKeywordIds: [],
        projectId: this.$route.params.id
      }
      console.log(this.engineeringIds, '12')
      console.log(this.categorysTwoIds)
      console.log(this.categorysIds)
      form.engineeringIds = this.engineeringIds
        .concat(this.categorysTwoIds)
        .concat(this.categorysIds)
      form.performanceKeywordIds = this.performanceKeywordIds
      getIndicators(form).then(res => {
        if (res.code === 200) {
          console.log(res)
          this.projectIndicators = res.data
          this.projectIndicators.forEach(item => {
            const index = this.getProjectIndicators.findIndex(i => {
              return i.indicatorId === item.indicatorId
            })
            if (index > -1) {
              if (item.required) {
                this.getProjectIndicators.splice(index, 1, item)
              }
              return
            }
            this.getProjectIndicators.push(item)
            console.log(this.getProjectIndicators, '111')
          })
          this.form = {}
          this.getProjectIndicators.map(item => {
            console.log(item)
            // if (item.fieldUnit === 0) {
            //   this.$set(
            //     this.form,
            //     item.required + item.indicatorId,
            //     item.indicatorValue === null ? 0 : parseInt(item.indicatorValue)
            //   )
            // } else {
            //   this.$set(
            //     this.form,
            //     item.required + item.indicatorId,
            //     item.indicatorValue
            //   )
            // }
            this.$set(
              this.form,
              item.required + item.indicatorId,
              item.indicatorValue
            )
          })
          loading.close()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.title {
  height: 50px;
  width: 100%;
  display: flex;
  border-bottom: 1px solid #dfe6ec;
  font-size: 14px;
  font-weight: 600;
  align-items: center;
  padding: 0 20px;
  .title-name {
    width: 100px;
    font-size: 14px;
  }
  .tag-button {
    flex: 1;
    text-align: right;
  }
  .title-icon {
    cursor: pointer;
    margin-left: 10px;
  }
}

.el-checkbox-group {
  flex: 1;
}

.el-input {
  margin-bottom: 20px;
}

.leftTable {
  width: 50%;
  float: left;
  border-right: 1px solid #d9e1f2;
  .businessCategory {
    text-align: center;
    border-bottom: 1px solid #dfe6ec;
    border-right: 1px solid #dfe6ec;
    padding: 5px;
    font-size: 14px;
  }
  .categorys {
    border-bottom: 1px solid #dfe6ec;
    border-top: 1px solid #dfe6ec;
    border-left: 1px solid #dfe6ec;
    padding: 5px 5px 5px 20px;
    font-size: 14px;
    width: 100%;
  }
  .bmsMdEngineeringCategorys {
    border-bottom: 1px solid #dfe6ec;
    border-right: 1px solid #dfe6ec;
    padding: 5px 5px 5px 20px;
    font-size: 14px;
    width: 100%;
  }
  .bmsMdPerformanceKeywords {
    border-bottom: 1px solid #dfe6ec;
    border-right: 1px solid #dfe6ec;
    padding: 5px 5px 5px 20px;
    font-size: 14px;
    width: 100%;
  }
}
.rightTable {
  width: 50%;
  float: left;
  .input-wrap {
    padding: 8px;
    display: flex;

    .input-label {
      min-width: 1em;
      max-width: 10em;
      color: rgba(0, 0, 0, 0.65);
      margin-right: 8px;
      display: flex;
      margin-top: 10px;
      flex: 0 0 140px;
    }

    .input-content {
      -webkit-box-flex: 1;
      flex-grow: 1;
      .el-select {
        width: 100%;
      }
    }
  }
}
.tableTitle {
  background-color: #d9e1f2;
  text-align: center;
  font-weight: 600;
  padding: 10px 0;
}

/deep/.el-input-number__decrease {
  display: none;
}
/deep/.el-input-number__increase {
  display: none;
}
/deep/.el-form-item--medium .el-form-item__content {
  width: 200px;
}
</style>
